<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="chosen/chosen.min.css">
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<!--
推特
css + html 组件
css + html + js 组件
jquery
css + html + js + jquery 组件

.box {}
.box .left {}
.box .left .title {}
@blue: blue;
$red: #f00;
.box {
  .left {
    .title {

    }
  }
}

v3: less & sass | scss
v4: 扁平化
v5: 移除了jQuery

$(css选择器).行为()
addClass() removeClass()
attr()
removeAttr()
$.each
$.map

querySelector(css选择器)
classList.add()
classList.remove() ...
getAttribute()
setAttribute()
removeAttribute()
map()
forEach()
filter()
some()
every()
find()
-->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        干货集中营
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">首页</a>
        </li>
        <li><a href="#">妹纸</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">干货 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8">
      <div class="carousel slide my-banner">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-slide-to="0" class="active">1</li>
          <li data-slide-to="1">2</li>
          <li data-slide-to="2">3</li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./images/pic1.webp" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./images/wbb.jpeg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="javascript:void(0)" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="javascript:void(0)" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <div class="col-lg-4 col-md-4">
      <div id="city-selector">
        <select id="country" class="dept_select"></select>
        <select id="province" class="dept_select"></select>
        <select id="city" class="dept_select"></select>
        <button>submit</button>
      </div>


      <!-- Button trigger modal -->
      <button
        type="button"
        class="btn btn-primary btn-lg my-modal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close close-modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<div class="container">
  <div class="lbt-box">
    <div class="imgs">
      <div class="imgitem">
        <img src="img/t1.png">
      </div>
      <div class="imgitem">
        <img src="img/t2.png">
      </div>
      <div class="imgitem">
        <img src="img/t3.png">
      </div>
      <div class="imgitem">
        <img src="img/t4.png">
      </div>

      <div class="imgitem">
        <img src="img/t1.png">
      </div>
      <div class="imgitem">
        <img src="img/t2.png">
      </div>
      <div class="imgitem">
        <img src="img/t3.png">
      </div>
      <div class="imgitem">
        <img src="img/t4.png">
      </div>

    </div>
    <button id="pre" type="button">上</button>
    <button id="next" type="button">下</button>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="demo" class="citys">
  <p>
    <select name="province"></select>
    <select name="city"></select>
    <select name="area"></select>
  </p>
</div>


<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="chosen/chosen.jquery.min.js"></script>
<script src="chosen/area_chs.js"></script>
<script type="text/javascript">
  var areaObj = [];
  function initLocation(e){
    var a = 0;
    for (var m in e) {
      areaObj[a] = e[m];
      a++;
    }
  }
</script>
<script src="chosen/location_chs.js"></script>
<script type="text/javascript">
  var country = '';
  for (var a=0;a<=_areaList.length-1;a++) {
    var objContry = _areaList[a];
    country += '<option value="'+objContry+'" a="'+(a+1)+'">'+objContry+'</option>';
  }
  $("#country").html(country).chosen({search_contains: true}).change(function(){
    var a = $("#country").find("option[value='"+$("#country").val()+"']").attr("a");
    var _province = areaObj[a];
    var province = '';
    for (var b in _province) {
      var objProvince = _province[b];
      if (objProvince.n) {
        province += '<option value="'+objProvince.n+'" b="'+b+'">'+objProvince.n+'</option>';
      }
    }
    if (!province) {
      province = '<option value="" b="0">--</option>';
    }
    $("#province").html(province).chosen({search_contains: true}).change(function(){
      var b = $("#province").find("option[value='"+$("#province").val()+"']").attr("b");
      var _city = areaObj[a][b];
      var city = '';
      for (var c in _city) {
        var objCity = _city[c];
        if (objCity.n) {
          city += '<option value="'+objCity.n+'">'+objCity.n+'</option>';
        }
      }
      if (!city) {
        var city = '<option value="">--</option>';
      }
      $("#city").html(city).chosen({search_contains: true}).change();
      $(".dept_select").trigger("chosen:updated");
    });
    $("#province").change();
    $(".dept_select").trigger("chosen:updated");
  });
  $("#country").change();

  $("#city-selector button").click(function(){
    alert($("#country").val()+'-'+$("#province").val()+'-'+$("#city").val());
  });
</script>
<script src="code/jquery.citys.js"></script>
<script src="js/index.js"></script>
</body>
</html>
